import React, { PureComponent } from 'react'
import { connect } from 'umi'
import Tools from '@/utils/Tools'
import DataQualityCreate from './DataQualityCreate'
import DataQualityDetail from './DataQualityDetail'
import { dataqualityDetail } from './api'

const Bus = Tools.Bus

@connect(({ flowDev }) => ({ ...flowDev }))
export default class DataQualityNode extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      data: null,
      create: false,
    }
  }

  componentDidMount() {
    this.dataqualityDetail()
  }

  dataqualityDetail = () => {
    const { taskNode } = this.props
    dataqualityDetail({ nodeId: taskNode.id }).then(async (res) => {
      if (res.status === 200) {
        this.setState({
          data: res.data,
          create: false,
        })
      }
    })
  }

  createChange = () => {
    this.setState({
      create: true,
    })
  }

  render() {
    const { data, create } = this.state
    const { taskNode } = this.props
    return (
      <div style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}>
        {!data || create
          ? <DataQualityCreate dataqualityDetail={this.dataqualityDetail} data={data} taskNode={taskNode} />
          : <DataQualityDetail createChange={this.createChange} data={data} taskNode={taskNode} />}
      </div>
    )
  }
}
